<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';

import { Page } from '@vben/common-ui';

import { useAsyncState } from '@vueuse/core';
import { Card, Image, TabPane, Tabs } from 'ant-design-vue';

import { getProductDetail } from '#/api/iot/product/index';
import pruductImage from '#/assets/images/product.png';

import Description from './components/base-info.vue';
import Model from './components/model.vue';
import ServerSubscription from './components/server-subscription.vue';
import TopicManage from './components/topic-manage.vue';

const route = useRoute();

const { state } = useAsyncState(
  () => getProductDetail(route.params.id as string),
  undefined,
);

const currentTab = ref(1);
</script>

<template>
  <Page :auto-content-height="true">
    <div class="p-4">
      <Card style="box-sizing: border-box">
        <div class="info-box">
          <div class="icon">
            <Image :width="200" :src="pruductImage" />
          </div>
          <div class="data" v-if="state">
            <Description :data="state" />
          </div>
        </div>
      </Card>
      <Card class="mt-4">
        <Tabs v-model:active-key="currentTab" size="large">
          <TabPane :key="1" tab="物模型">
            <Model :tsl="state?.tsl" :product-id="state?.id || ''" />
          </TabPane>
          <TabPane :key="2" tab="Topic 管理">
            <TopicManage :product-id="state?.id" />
          </TabPane>
          <TabPane :key="3" tab="服务端订阅">
            <ServerSubscription :data="state?.subscribe" />
          </TabPane>
        </Tabs>
      </Card>
    </div>
  </Page>
</template>
<style lang="scss">
.info-box {
  display: flex;

  .icon {
    width: 20%;
  }

  .data {
    display: flex;
    align-items: center;
    width: 90%;
  }
}
</style>
